<template>
  <div class="my-container">
    <van-cell-group v-if="user" class="info-wrap">
      <!-- 头像部分 -->
      <van-cell class="user-info" title="" value="" center :border="false">
        <template #icon>
          <van-image
            round
            class="avatar"
            :src="currentUser.photo"
            fit="cover"
          />
        </template>
        <template #title>
          <span class="name">{{ currentUser.name }}</span>
        </template>
        <template #default>
          <van-button
            to="/user/profile"
            class="edit-btn"
            plain
            size="mini"
            round
            >编辑资料</van-button
          >
        </template>
      </van-cell>

      <!-- 信息部分 -->
      <van-grid class="data-info" :border="false">
        <van-grid-item>
          <span slot="icon" class="info-num">{{ currentUser.art_count }}</span>
          <span slot="text" class="info-name">头条</span>
        </van-grid-item>
        <van-grid-item>
          <span slot="icon" class="info-num">{{
            currentUser.follow_count
          }}</span>
          <span slot="text" class="info-name">关注</span>
        </van-grid-item>
        <van-grid-item>
          <span slot="icon" class="info-num">{{ currentUser.fans_count }}</span>
          <span slot="text" class="info-name">粉丝</span>
        </van-grid-item>
        <van-grid-item>
          <span slot="icon" class="info-num">{{ currentUser.like_count }}</span>
          <span slot="text" class="info-name">获赞</span>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div v-else class="not-login">
      <img
        src="./not-login.png"
        alt=""
        @click="
          $router.push({
            name: 'login',
            query: {
              redirectPath: '/my'
            }
          })
        "
      />
      <span>登录/注册</span>
    </div>
    <van-grid column-num="2" class="nav-wrap mg-b-5px">
      <van-grid-item icon-prefix="myicon" icon="shoucang" text="收藏" />
      <van-grid-item icon-prefix="myicon" icon="lishi" text="历史" />
    </van-grid>
    <van-grid class="line-wrap">
      <van-cell center title="消息通知" is-link to="/" />
      <van-cell center class="mg-b-5px" title="小智同学" is-link to="" />
      <van-cell
        v-if="user"
        center
        class="logout-btn"
        title="退出登录"
        @click="onlogout"
      />
    </van-grid>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
import { apiGetCurrentUser } from '@/api/user'
export default {
  name: 'MyIndex',
  data() {
    return {
      currentUser: {}
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.getCurrentUser()
  },
  methods: {
    ...mapMutations(['deleteUserInfo']),
    onlogout() {
      Dialog.confirm({
        title: '退出确认',
        message: '退出当前账号，将不能同步收藏，发布评论和云端分享等'
      })
        .then(() => {
          // on confirm
          this.deleteUserInfo()
        })
        .catch(() => {
          // on cancel
        })
    },
    async getCurrentUser() {
      if (this.user) {
        const { data } = await apiGetCurrentUser()
        console.log(data)
        this.currentUser = data.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  .info-wrap {
    background: url('./banner.png') no-repeat;
    background-size: convert;
    .user-info {
      box-sizing: border-box;
      background: unset;
      height: 115px;
      padding-top: 38px;
      padding-bottom: 11px;
      .avatar {
        width: 66px;
        height: 66px;
        border: 2px solid #ffffff;
        margin-right: 11px;
      }
      .name {
        font-size: 15px;
        color: #ffffff;
      }
      .edit-btn {
        // width: 58px;
        height: 16px;
        font-size: 10px;
        color: #666666;
      }
    }

    .data-info {
      /deep/ .van-grid-item__content {
        background: unset;
        height: 65px;
        color: #ffffff;
        .info-num {
          font-size: 18px;
        }
        .info-name {
          font-size: 11px;
        }
      }
    }
  }
  .not-login {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('./banner.png') no-repeat;
    background-size: cover;
    img {
      width: 66px;
      height: 66px;
      margin-bottom: 8px;
    }
    span {
      font-size: 14px;
      color: #ffffff;
    }
  }
  .nav-wrap {
    .van-grid-item {
      height: 70px;
      // 22 14
      /deep/ .van-grid-item__icon {
        font-size: 22px;
        &.myicon-shoucang {
          color: #eb5253;
        }
        &.myicon-lishi {
          color: #ff9d1d;
        }
      }
      /deep/ .van-grid-item__text {
        font-size: 14px;
      }
    }
  }
  .line-wrap {
    .van-cell {
      height: 50px;
      color: #333333;
      font-size: 15px;
    }
  }
  .logout-btn {
    height: 52px;
    .van-cell__title {
      text-align: center;
      color: #d86262;
      font-size: 15px;
    }
  }
  .mg-b-5px {
    margin-bottom: 5px;
  }
}
</style>
